<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4003170_2m47xs7zlwp.css"
    />
    <link rel="stylesheet" href="../css/shouye.css" />
  </head>
  <body>
    <!-- 第一部分 -->
    <div class="first">
      <ul>
        <p>欢迎来酒仙网！</p>
        <a
          id="qingdenglu1"
          style="margin-right: 10px"
          class="a1"
          href="02.登录.html"
          >请登录</a
        >
        <a class="a1" href="01.注册.html">免费注册</a>
        <li id="li1" class="yincangkuang">
          <a href="">我的酒仙</a
          ><span class="iconfont icon-xiaosanjiaodown"></span>
          <a class="biankuan" href="">我的订单</a>
          <a class="biankuan" href="">物流跟踪</a>
          <a class="biankuan" href="">我的优惠券</a>
        </li>
        <a class="a2" href="">CEO邮箱</a>
        <span class="iconfont icon-gouwucheman"
          ><a id="a1" href="05.购物车页面.html"
            >购物车 <span class="number">0</span> 件</a
          ></span
        >
        <a class="a2" href="">CLUB会员</a>
        <a class="a1" href="">| 招商入驻 |</a>
        <li class="li2">
          <span class="iconfont icon-line-qrscansaomaerweima-01"></span>
          <a href="">手机逛酒仙</a>
          <img src="../images/二维码.jpg" alt="" />
        </li>
        <span class="fengefu">|</span>
        <li id="li3" class="yincangkuang">
          <span class="iconfont icon-daohangfenlei"></span
          ><a class="a1" href="">网站导航</a
          ><span class="iconfont icon-xiaosanjiaodown"></span>
          <div class="kuozhan">
            <span
              ><h5>购物</h5>
              <div>
                <a href="">白酒</a><a href="">葡萄酒</a><a href="">洋酒</a>
              </div>
              <div>
                <a href="">啤酒</a><a href="">保健酒</a><a href="">黄酒</a>
              </div>
            </span>
            <span class="huodong"
              ><h5>活动</h5>
              <div>
                <a href="">酒鬼酒</a><a href="">进口馆</a
                ><a href="">老酒特卖</a>
              </div>
              <div><a href="">新品发现</a></div>
            </span>
            <span
              ><h5>其它</h5>
              <div>
                <a href="">会员中心</a><a href="">常见问题</a
                ><a href="">招商入驻</a>
              </div>
            </span>
            <p>热线电话:<span>400-617-9999</span></p>
          </div>
        </li>
        <li id="li4" class="yincangkuang">
          <span class="iconfont icon-kefufill"></span>
          <a href="">客户服务</a
          ><span class="iconfont icon-xiaosanjiaodown"></span>
          <a class="a3" href="">常见问题</a>
          <a class="a3" href="">配送说明</a>
          <a class="a3" href="">售后服务</a>
        </li>
        <p class="p1">热线电话　<span>400-617-9999</span></p>
      </ul>
    </div>
    <!-- 第二部分 -->
    <div class="second">
      <a href=""><img src="../images/广告.jpg" alt="" /></a>
    </div>
    <!-- 第三部分 -->
    <div class="third">
      <a class="a1" href=""><img src="../images/酒仙.png" alt="" /></a>
      <a class="a1" href=""><img src="../images/轮播图.gif" alt="" /></a>
      <div class="box">
        <div class="sousuolan">
          <input
            type="text"
            placeholder="年度品牌盛典：大额券限量领 前100名下单满299送高档餐具"
          />
          <p><a href="">搜 索</a></p>
          <ul>
            <a href="">白酒</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">老酒</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">茅台</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">五粮液</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">剑南春</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">人头马</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">酒鬼</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">容大</a
            ><span class="iconfont icon-fenge"></span
            ><a href="">国台</a>
          </ul>
        </div>
      </div>
      <div class="mianyunfei"><img src="../images/免运费.png" alt="" /></div>
    </div>
    <!-- 第四部分 -->
    <div class="fourth">
      <nav>
        <li>
          <a href="">首页</a>
          <span class="iconfont icon-fenge"></span>
          <a href="">CLUB</a>
          <span class="iconfont icon-fenge"></span>
          <a href="">招商入驻</a>
          <span class="iconfont icon-fenge"></span>
          <a href="">沱牌舍得</a>
          <span class="iconfont icon-fenge"></span>
          <a href="">新品</a>
          <span class="iconfont icon-fenge"></span>
          <a href="">门店加盟</a>
        </li>
        <img src="../images/滚动字幕.gif" alt="" />
      </nav>
    </div>
    <!-- 第五部分 -->
    <div class="fifth">
      <div class="picBox">
        <ul class="picUl">
          <li><img src="../images/轮播图1.jpg" alt="" /></li>
          <li><img src="../images/轮播图2.jpg" alt="" /></li>
          <li><img src="../images/轮播图3.jpg" alt="" /></li>
          <li><img src="../images/轮播图4.jpg" alt="" /></li>
          <li><img src="../images/轮播图5.jpg" alt="" /></li>
          <li><img src="../images/轮播图6.jpg" alt="" /></li>
          <li><img src="../images/轮播图7.jpg" alt="" /></li>
        </ul>
        <ul class="spot">
          <li class="hover">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </div>
      <!-- 左边侧边栏 -->
      <div class="left" id="left">
        <h5>全部商品分类</h5>
        <li class="li5" data-index="0">
          <span class="iconfont icon-aixin"></span>
          <p>一键选酒</p>
          <div>
            <a href="">整箱购</a>
            <a href="">老酒特卖</a>
            <a href="">地域名酒</a>
            <a href="">有礼有面</a>
          </div>
        </li>
        <li class="li5" data-index="1">
          <span class="iconfont icon-baijiu"></span>
          <p>白酒</p>
          <div>
            <a class="gaoliang" href="">茅台</a>
            <a class="gaoliang" href="">五粮液</a>
            <a class="gaoliang" href="">酒鬼</a>
            <a href="">汾酒</a>
            <a href="">浓香型</a>
            <a class="gaoliang" href="">酱香型</a><a href="">贵州</a
            ><a href="">四川</a>
          </div>
        </li>
        <li class="li5" data-index="2">
          <span class="iconfont icon-putaojiu"></span>
          <p>葡萄酒</p>
          <div>
            <a class="gaoliang" href="">法国</a>
            <a class="gaoliang" href="">澳大利亚</a>
            <a class="gaoliang" href="">西班牙</a>
            <a href="">中国</a>
            <a href="">拉菲</a>
            <a class="gaoliang" href="">奔富</a><a href="">黄尾袋鼠</a>
          </div>
        </li>
        <li class="li5" data-index="3">
          <span class="iconfont icon-ganlanjiweijiubei"></span>
          <p>洋酒</p>
          <div>
            <a class="gaoliang" href="">马爹利</a>
            <a class="gaoliang" href="">人头马</a>
            <a href="">尊尼获加</a>
            <a class="gaoliang" href="">轩尼诗</a>
            <a class="gaoliang" href="">绝对</a>
            <a href="">百龄坛</a>
          </div>
        </li>
        <li class="li5" data-index="4">
          <span class="iconfont icon-huangjiu"></span>
          <p>啤酒/黄酒/养生酒</p>
          <div>
            <a class="gaoliang" href="">椰岛鹿龟</a>
            <a class="gaoliang" href="">青岛</a>
            <a class="gaoliang" href="">1664</a>
            <a href="">劲牌</a>
            <a href="">虎狮争霸</a>
          </div>
        </li>
        <li
          class="li5"
          data-index="5"
          class="shishang"
          style="height: 60px; border: none"
        >
          <span class="iconfont icon-jiubei"></span>
          <p>食尚</p>
          <div>
            <a class="gaoliang" href="">酒具</a>
            <a href="">茶叶</a>
            <a class="gaoliang" href="">水饮</a>
          </div>
        </li>
        <!-- 隐藏栏 -->
        <div id="big"></div>
      </div>
      <!-- 右边栏 -->
      <div class="right">
        <ul id="lun1">
          <li>
            <a href="">
              <img src="../images/酒1.png" alt="" />
            </a>
          </li>
          <li>
            <a href=""><img src="../images/酒2.png" alt="" /></a>
          </li>
        </ul>
        <ul id="lun2" style="height: 146px">
          <li>
            <a href="">
              <img src="../images/酒3.png" alt="" />
            </a>
          </li>
          <li>
            <a href=""><img src="../images/酒4.png" alt="" /></a>
          </li>
        </ul>
        <ul id="lun3">
          <li>
            <a href="">
              <img src="../images/酒5.png" alt="" />
            </a>
          </li>
          <li>
            <a href=""><img src="../images/酒1.png" alt="" /></a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 第六部分 -->
    <div class="sixth">
      <div class="left">
        <ul>
          <li><a href="">疯狂抢购</a></li>
          <li><a href="">爆款推荐</a></li>
          <li><a href="">居家小酌</a></li>
          <li><a href="">整箱钜惠</a></li>
          <li><a href="">限量大牌</a></li>
        </ul>
        <div id="shangpinliebiaoye" class="shangpinye">
          <!-- <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div>
          <div class="shangpin">
            <a class="aa1" href=""><img src="" alt="" /></a>
            <a class="aa2" href=""></a>
            <p></p>
          </div> -->
        </div>
      </div>
      <div class="right">
        <div class="xinxi">
          <ul>
            <li id="li10">
              <a id="a10" href="">公告信息</a>
              <div class="cangjiu">
                <a href="">关于庄藏酱酒</a>
                <a href="">club会员权益</a>
                <a href="">关于不法分子冒充客服</a>
                <a href="">酒仙网对外开放入市场</a>
              </div>
            </li>
            <li id="li11">
              <a id="a11" href="">促销信息</a>
              <div id="feitian" class="cangjiu">
                <a href="">飞天茅台1499飞速抢</a>
              </div>
            </li>
          </ul>
        </div>
        <div id="lunbo10" style="margin: 0 0 20px 0">
          <b id="b10">
            <a href=""><img src="../images/今日推荐.jpg" alt="" /></a>
            <a href=""><img src="../images/今日推荐.jpg" alt="" /></a>
            <a href=""><img src="../images/今日推荐.jpg" alt="" /></a>
          </b>
        </div>
        <div id="lunbo11">
          <b id="b11">
            <a href=""><img src="../images/拉菲.png" alt="" /></a>
            <a href=""><img src="../images/董酒.jpg" alt="" /></a>
            <a href=""><img src="../images/拉菲.png" alt="" /></a>
          </b>
        </div>
      </div>
    </div>

    <!-- 第七部分 -->
    <div class="seventh">
      <div class="gudinglan">
        <li id="wo">
          <a class="iconfont icon-wode" href=""></a>
          <a href="">我</a>
          <div class="wo">
            <span class="top">
              <b></b>　 <span>您好！ 请</span
              ><a id="qingdenglu2" href="02.登录.html">登录</a>
            </span>
            <span class="bottom">
              <i>
                <a class="iconfont icon-wodedingdan" href=""></a>
                <a href="">我的订单</a>
              </i>
              <i>
                <a class="iconfont icon-youhuiquan" href=""></a>
                <a href="">我的优惠券</a>
              </i>
            </span>
            <span class="bottom">
              <i>
                <a class="iconfont icon-wuliu" href=""></a>
                <a href="">订单跟踪</a>
              </i>
              <i>
                <a class="iconfont icon-huiyuan" href=""></a>
                <a href="">会员俱乐部</a>
              </i>
            </span>
          </div>
        </li>
        <li id="shoucang">
          <a class="iconfont icon-pailietubiao-21" href=""></a>
          <a href="">收藏</a>
          <span class="ninhao">
            <b></b>　 <span>您好！ 请</span
            ><a id="qingdenglu3" href="02.登录.html">登录</a>
          </span>
        </li>
        <li id="gouwuche">
          <a
            class="iconfont icon-gouwuchecart-fill2"
            href="05.购物车页面.html"
          ></a>
          <a id="qingdenglu4" href="05.购物车页面.html">购物车</a>
        </li>
        <li class="last">
          <span class="tanchu">
            <a class="iconfont icon-xie" href=""></a>
            <p>用户反馈</p>
          </span>
          <span class="tanchu">
            <a class="iconfont icon-erweima" href=""></a>
            <p class="ma"><img src="../images/二维码.jpg" alt="" /></p>
          </span>
          <span>
            <a
              id="fanhuidingbu"
              class="iconfont icon-xiangshangjiantou"
              href=""
            ></a>
          </span>
        </li>
      </div>
    </div>
    <script src="../js/startMove.js"></script>
    <script src="../js/01ajax.js"></script>
    <script>
      /* 小箭头 */
      let oUps = document.querySelectorAll(".icon-xiaosanjiaodown");
      let oLis = document.querySelectorAll(".yincangkuang");
      for (let i = 0; i < oLis.length; i++) {
        oLis[i].onmouseover = () => {
          oUps[i].className = "iconfont icon-xiaosanjiaoup";
        };
        oLis[i].onmouseout = () => {
          oUps[i].className = "iconfont icon-xiaosanjiaodown";
        };
      }
      /* 小轮播图 */
      /* 左右轮播小轮播1 */
      let olunbo10 = document.getElementById("lunbo10");
      let ob10 = document.getElementById("b10");
      let ob10s = ob10.children;
      let perwidth = ob10s[0].offsetWidth;
      ob10.style.width = ob10s.length * perwidth + "px";
      let a = 0;
      setInterval(() => {
        a++;
        if (a == ob10s.length) {
          ob10.style.left = 0;
          a = 1;
        }
        startMove(ob10, { left: -perwidth * a });
      }, 3000);

      /* 左右轮播小轮播1 */
      let olunbo11 = document.getElementById("lunbo11");
      let ob11 = document.getElementById("b11");
      let ob11s = ob11.children;
      let pewidth = ob11s[0].offsetWidth;
      ob11.style.width = ob11s.length * pewidth + "px";
      let b = 0;
      setInterval(() => {
        b++;
        if (b == ob11s.length) {
          ob11.style.left = 0;
          b = 1;
        }
        startMove(ob11, { left: -pewidth * b });
      }, 3000);

      // 小轮播图1
      let oLun1 = document.getElementById("lun1");
      let oLun1s = oLun1.children;
      let j = 0;
      function moves() {
        j++;
        for (let i = 0; i < oLun1s.length; i++) {
          startMove(oLun1s[i], { opacity: 0 });
        }
        if (j == oLun1s.length) {
          j = 0;
        }
        if (j == -1) {
          j = oLun1s.length - 1;
        }
        startMove(oLun1s[j], { opacity: 100 });
      }
      let items = setInterval(() => {
        moves();
      }, 3000);
      // 鼠标移出清除定时器
      oLun1.parentNode.onmouseover = () => {
        clearInterval(items);
      };
      // 鼠标移出开启定时器
      oLun1.parentNode.onmouseout = () => {
        items = setInterval(() => {
          moves();
        }, 3000);
      };
      // 小轮播图2
      let oLun2 = document.getElementById("lun2");
      let oLun2s = oLun2.children;
      let q = 0;
      function movess() {
        q++;
        for (let i = 0; i < oLun1s.length; i++) {
          startMove(oLun2s[i], { opacity: 0 });
        }
        if (q == oLun2s.length) {
          q = 0;
        }
        if (q == -1) {
          q = oLun2s.length - 1;
        }
        startMove(oLun2s[q], { opacity: 100 });
      }
      let itemss = setInterval(() => {
        movess();
      }, 3000);
      // 鼠标移出清除定时器
      oLun2.parentNode.onmouseover = () => {
        clearInterval(itemss);
      };
      // 鼠标移出开启定时器
      oLun2.parentNode.onmouseout = () => {
        itemss = setInterval(() => {
          movess();
        }, 3000);
      };
      // 小轮播图3
      let oLun3 = document.getElementById("lun3");
      let oLun3s = oLun3.children;
      let k = 0;
      function movesss() {
        k++;
        for (let i = 0; i < oLun3s.length; i++) {
          startMove(oLun3s[i], { opacity: 0 });
        }
        if (k == oLun3s.length) {
          k = 0;
        }
        if (k == -1) {
          k = oLun3s.length - 1;
        }
        startMove(oLun3s[k], { opacity: 100 });
      }
      let itemsss = setInterval(() => {
        movesss();
      }, 3000);
      // 鼠标移出清除定时器
      oLun3.parentNode.onmouseover = () => {
        clearInterval(itemsss);
      };
      // 鼠标移出开启定时器
      oLun3.parentNode.onmouseout = () => {
        itemsss = setInterval(() => {
          movesss();
        }, 3000);
      };

      /* 大轮播图 */
      let oPicUl = document.querySelector(".picUl");
      //let oSpan = document.querySelectorAll("span");
      let oSpot = document.querySelector(".spot");
      let oSpotChild = oSpot.children;
      let oLi = oPicUl.children;
      let i = 0;
      function move() {
        i++;
        for (let j = 0; j < oLi.length; j++) {
          //利用循环，将所有图片的透明度渐变为0
          startMove(oLi[j], { opacity: 0 });
          //移除所有小圆点的样式
          oSpotChild[j].classList.remove("hover");
        }

        //临界值：前三张图片循环完毕，在下次出现的时候将i值重置为0，重新循环
        if (i == oLi.length) {
          i = 0;
        }

        //设定手动向左切换图片临界值，重新循环
        if (i == -1) {
          i = oLi.length - 1;
        }

        //为图片对应的小圆点添加样式
        oSpotChild[i].classList.add("hover");

        //将循环的下一个指定图片透明度渐变为1
        startMove(oLi[i], { opacity: 100 });
      }
      //定时器运行，图片循环播放
      let timer = setInterval(() => {
        move();
      }, 3000);
      //点击小圆点切换对应图片
      for (let k = 0; k < oSpotChild.length; k++) {
        oSpotChild[k].onmouseover = () => {
          i = k - 1;
          move();
        };
      }
      //鼠标移入轮播区域关闭定时器自动轮播
      oPicUl.parentNode.onmouseover = () => {
        clearInterval(timer);
      };
      //鼠标移出开启定时器轮播
      oPicUl.parentNode.onmouseout = () => {
        timer = setInterval(() => {
          move();
        }, 3000);
      };

      /*  隐藏栏 */
      // 隐藏栏1
      let arr1 = [
        {
          a1: "特色会场",
          b1: "精选会场",
          c1: "红洋酒专区",
          d1: "合作共赢",
          a: "容大酱酒",
          b: "老酒特卖",
          c: "实惠大坛",
          d: "有礼有面",
          e: "新品尝鲜",
          f: "酒仙甄选",
          g: "名优白酒",
          h: "向往生活",
          i: "高分推荐",
          j: "送礼优选",
          k: "线下门店",
          l: "招商入驻",
        },
      ];
      // 隐藏栏1
      let html1 = "";
      arr1.forEach((o) => {
        html1 = `
   <div class="box" style=" width: 510px;
   height: 450px;
   background-color: #fff;
   display: flex;border:1px solid #eee">
 <ul class="left" style="width: 80px;
   height: 450px;
   background-color: #eee;">
   <p>${o.a1}</p>
   <p>${o.b1}</p>
   <p>${o.c1}</p>
   <p>${o.d1}</p>
 </ul>
 <ul class="right" style=" width: 430px;
   height: 400px;
   box-sizing: border-box;
   padding: 0 10px;">
   <li style="width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
     <a href="" style="color:orange">${o.a}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.b}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.c}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.d}</a>
   </li>
   <li style="width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
     <a href="" style="color:orange">${o.e}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.f}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.g}</a>
   </li>
   <li style="width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
     <a href="">${o.h}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.i}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:red">${o.j}</a>
   </li>
   <li style="padding:8px;">
     <a href="">${o.k}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.l}</a>
   </li>
 </ul>
</div>
             `;
      });
      // 隐藏栏2
      let arr2 = [
        {
          a1: "品牌",
          b1: "香型",
          c1: "产地",
          d1: "价位",
          A1: "精选品牌　　A B C D E F G H I J K L M N O P Q R S T U V W X Y Z",
          A2: "容大酱酒",
          A3: "茅台",
          A4: "五粮液",
          A5: "剑南春",
          A6: "泸州老窖",
          A7: "洋河",
          A8: "汾酒",
          A9: "水井坊",
          A10: "酒鬼酒",
          A11: "郎酒",
          A12: "牛栏山",
          A13: "西凤",
          A14: "习酒",
          A15: "国窖1573",
          A16: "董酒",
          A17: "红星",
          A18: "古井贡",
          A19: "扳倒井",
          A20: "伊力特",
          A21: "孔府家",
          A22: "金六福",
          A23: "景芝",
          A24: "小糊涂仙",
          A25: "宝丰",
          A26: "全兴",
          A27: "汾阳王",
          A28: "杏花村",
          A29: "金不换",
          A30: "沱牌",
          A31: "酒鬼",
          A32: "金沙",
          A33: "衡水老白干",
          A34: "贵州五星",
          A35: "白水杜康",
          A36: "茅台集团国隆",
          A37: "枝江",
          A38: "兰陵",
          A39: "五岭洞藏",
          A40: "白云边",
          A41: "今世缘",
          A42: "双沟",
          A43: "茅台白金",
          A44: "迎驾",
          A45: "张弓",
          A46: "小角楼",
          A47: "河套",
          A48: "王祖烧坊",
          A49: "更多",
          B1: "浓香型",
          B2: "酱香型",
          B3: "清香型",
          B4: "馥郁香型",
          B5: "兼香型",
          B6: "特香型",
          B7: "芝麻香型",
          B8: "凤香型",
          B9: "老白干香型",
          B10: "米香型",
          B11: "董香型",
          B12: "其它",
          C1: "贵州",
          C2: "四川",
          C3: "山西",
          C4: "北京",
          C5: "江苏",
          C6: "安徽",
          C7: "湖北",
          C8: "江西",
          C9: "山东",
          C10: "河南",
          C11: "河北",
          C12: "湖南",
          C13: "陕西",
          C14: "新疆",
          C15: "内蒙古",
          C16: "台湾",
          C17: "吉林",
          D1: "1-49元",
          D2: "50-99元",
          D3: "100-199元",
          D4: "200-299元",
          D5: "300-599元",
          D6: "600-999元",
          D7: "1000-1999元",
          D8: "2000元及以上",
        },
      ];
      let html2 = "";
      arr2.forEach((o) => {
        html2 = `
     <div class="box" style="width: 510px;
   height: 450px;
   background-color: #fff;
   display: flex;
   box-sizing: border-box;
   border: 1px solid #eee;">
       <ul class="left" style=" width: 60px;height: 450px;background-color: #eee;">
         <p style="height:200px;line-height:200px;width:60px;">${o.a1}</p>
         <p style="height:70px;line-height:70px;width:60px;">${o.b1}</p>
         <p style="height:60px;line-height:60px;width:60px;">${o.c1}</p>
         <p style="height:60px;line-height:60px;width:60px;">${o.d1}</p>
       </ul>
       <ul class="right" style=" width: 450px;height: 400px;box-sizing: border-box;padding: 0 10px;">
         <li class="jingxuanpinpai" style="width: 430px;height: 200px;box-zing:border-box;padding:10px 0 0 0;border-bottom:1px dotted #ccc">
           <a href="" style="width:430px;box-sizing: border-box;padding: 0 0 10px 0;">${o.A1}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A2}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A3}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A4}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A5}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A6}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A7}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A8}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A9}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A10}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A11}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A12}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A13}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A14}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A15}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A16}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A17}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A18}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A19}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A20}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A21}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A22}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A23}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A24}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A25}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A26}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A27}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A28}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A29}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A30}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A31}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A32}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A33}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A34}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A35}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A36}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A37}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A38}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A39}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A40}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A41}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A42}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A43}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A44}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A45}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A46}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A47}</a>
           <a href="" style="margin: 0 16px 0 0;">${o.A48}</a>
           <a href="" style="margin: 0 16px 0 0;color:orange;">${o.A49}</a>
         </li>
         <li style="width:430px;height:60px;box-sizing:border-box;padding:10px 0 0 0;border-bottom:1px dotted #ccc">
           <a href=""style="color:orange;">${o.B1}</a>
           <span class="iconfont icon-fenge"></span>
           <a href=""style="color:orange;">${o.B2}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B3}</a>
           <span class="iconfont icon-fenge"></span>
           <a href=""style="color:orange;">${o.B4}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B5}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B6}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B7}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B8}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="" >${o.B9}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B10}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B11}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.B12}</a>
         </li>
         <li style="width:430px;height:60px;box-sizing:border-box;padding:10px 0 0 0;border-bottom:1px dotted #ccc">
           <a href="" style="color:orange;">${o.C1}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="" style="color:orange;">${o.C2}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C3}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C4}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C5}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C6}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C7}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C8}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="" style="color:orange;">${o.C9}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C10}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C11}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C12}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C13}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C14}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C15}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C16}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.C17}</a>
         </li>
         <li style="border:none;width:430px;height:60px;box-sizing:border-box;padding:10px 0 0 0;">
           <a href="">${o.D1}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D2}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D3}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D4}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D5}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D6}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D7}</a>
           <span class="iconfont icon-fenge"></span>
           <a href="">${o.D8}</a>
         </li>
       </ul>
     </div>
   `;
      });
      // 隐藏栏3
      let arr3 = [
        {
          a1: "红葡萄酒",
          b1: "白葡萄酒",
          c1: "桃红葡萄酒",
          d1: "起泡酒",
          e1: "国家",
          f1: "品牌",
          g1: "品种",
          h1: "价格区间",
          A1: "干红",
          A2: "半干红",
          A3: "甜红",
          A4: "半甜红",
          B1: "干白",
          B2: "半干白",
          B3: "甜白",
          B4: "半甜白",
          C1: "干型桃红",
          C2: "半干型桃红",
          C3: "甜型桃红",
          C4: "半甜型桃红",
          D1: "起泡酒/香槟",
          D2: "干型气泡酒",
          D3: "半干型起泡酒",
          D4: "甜型起泡酒",
          E1: "法国",
          E2: "澳大利亚",
          E3: "西班牙",
          E4: "智利",
          E5: "意大利",
          E6: "德国",
          E7: "中国",
          E8: "随时随意波尔多",
          E9: "葡萄牙",
          E10: "美国",
          E11: "俄罗斯",
          F1: "拉菲",
          F2: "奔富",
          F3: "黄尾袋鼠",
          F4: "张裕",
          F5: "长城",
          F6: "茉莉花",
          F7: "丁戈树",
          F8: "杰卡斯",
          G1: "赤霞珠",
          G2: "西拉",
          G3: "美乐",
          G4: "歌海娜",
          G5: "霞多丽",
          G6: "长相思",
          G7: "马尔贝克",
          G8: "添普尼洛",
          H1: "1-49",
          H2: "50-99",
          H3: "100-199",
          H4: "200-299",
          H5: "300-499",
          H6: "500-799",
          H7: "800-999",
          H8: "1000以上",
        },
      ];
      let html3 = "";
      arr3.forEach((o) => {
        html3 = `<div class="box" style="width: 510px;
   height: 450px;
   background-color: #fff;
   display: flex;border:1px solid #eee">
 <ul class="left" style="width: 80px;
   height: 450px;
   background-color: #eee;">
   <p>${o.a1}</p>
   <p>${o.b1}</p>
   <p>${o.c1}</p>
   <p>${o.d1}</p>
   <p style="height:70px;line-height:70px">${o.e1}</p>
   <p>${o.f1}</p>
   <p style="height:40px;line-height:40px">${o.g1}</p>
   <p style="height:90px;line-height:90px">${o.h1}</p>
 </ul>
 <ul class="right" style="width: 430px;
   height: 400px;
   box-sizing: border-box;
   padding: 0 10px;">
   <li style='width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="">${o.A1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A4}</a>
   </li>
   <li style='width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="">${o.B1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.B2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.B3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.B4}</a>
   </li>
   <li style='width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="">${o.C1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C4}</a>
   </li>
   <li style='width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="">${o.D1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.D2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.D3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.D4}</a>
   </li>
   <li class="faguo" style= "border-bottom: 1px dotted #666; width:410px;height:70px;box-sizing:border-box;padding:12px 0 0 0">
     <a href="" style="color:orange">${o.E1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.E3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E6}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.E7}</a>
     <span class="iconfont icon-fenge"></span><br>
     <a href="" style="color:orange">${o.E8}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E9}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E10}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.E11}</a>
   </li>
   <li style='width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="" style="color:orange">${o.F1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.F2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.F3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.F4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.F5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.F6}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.F7}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.F8}</a>
   </li>
   <li class="faguo" style= "border-bottom: 1px dotted #666;height:60px;padding:15px 0 0 0">
     <a href="" style="color:orange">${o.G1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.G2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.G3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.G4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.G5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.G6}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.G7}</a>
     <span class="iconfont icon-fenge"></span><br>
     <a href="">${o.G8}</a>
   </li>
   <li class="faguo" style='width: 410px;
   height: 40px;
   box-sizing: border-box;
   padding: 8px 0 0 0;'>
     <a href="">${o.H1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H6}</a>
     <span class="iconfont icon-fenge"></span><br>
     <a href="">${o.H7}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.H8}</a>
   </li>
 </ul>
</div>
`;
      });
      // 隐藏栏4
      let arr4 = [
        {
          a1: "品牌",
          b1: "品类",
          c1: "价格区间",
          d1: "产地",
          A1: "芝华士",
          A2: "人头马",
          A3: "马爹利",
          A4: "尊尼获加",
          A5: "轩尼诗",
          A6: "百龄坛",
          A7: "绝对",
          A8: "杰克丹尼",
          A9: "珍露",
          A10: "深蓝",
          A11: "百加得",
          A12: "皇家礼炮",
          A13: "泰斯卡",
          A14: "斯米诺",
          A15: "温莎诗贝",
          A16: "布加德",
          A17: "波士",
          A18: "占边",
          A19: "马谛氏",
          A20: "法圣古堡",
          B1: "白兰地",
          B2: "威士忌",
          B3: "伏特加",
          B4: "金酒",
          B5: "龙舌兰",
          B6: "朗姆酒",
          B7: "力娇酒",
          B8: "韩国烧酒",
          B9: "预调酒",
          B10: "威末酒",
          B11: "单一麦芽",
          B12: "其它",
          C9: "1-49",
          C2: "50-99",
          C3: "100-199",
          C4: "200-299",
          C5: "300-499",
          C6: "500-799",
          C7: "800-999",
          C8: "1000以上",
          D1: "英国",
          D2: "法国",
          D3: "俄罗斯",
          D4: "美国",
          D5: "瑞典",
          D6: "墨西哥",
          D7: "意大利",
          D8: "德国",
          D9: "南非",
          D10: "荷兰",
          D11: "爱尔兰",
          D12: "波多黎各",
          D13: "古巴",
          D14: "韩国",
          D15: "巴西",
          D16: "中国",
          D17: "波兰",
          D18: "乌克兰",
          D19: "孟买",
          E1: "../images/鸡尾酒.jpg",
        },
      ];
      let html4 = "";
      arr4.forEach((o) => {
        html4 = `
   <div class="box" style=" width: 510px;
   height: 450px;
   background-color: #fff;
   display: flex;border:1px solid #eee">
 <ul class="left" style="width: 80px;
   height: 450px;
   background-color: #eee;">
   <p style="height: 130px;line-height:130px">${o.a1}</p>
   <p style="height: 90px;line-height:90px">${o.b1}</p>
   <p style="height: 95px;line-height:95px">${o.c1}</p>
   <p style="height: 110px;line-height:110px">${o.d1}</p>
 </ul>
 <ul class="middle" style=" width: 270px;
   height: 400px;
   box-sizing: border-box;
   padding: 0 10px;">
   <li style="box-sizing: border-box;
   padding: 10px 0 0 0;
   width: 250px;
   height: 130px;
   border-bottom: 1px dotted #ccc;">
       <a href="" style="color:orange;">${o.A1}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.A2}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A3}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.A4}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.A5}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.A6}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A7}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.A8}</a>
       <a href="">${o.A9}</a>
       <a href="" style="color:orange;">${o.A10}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A11}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A12}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A13}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.A14}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A15}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A16}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A17}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.A18}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A19}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.A20}</a>
   </li>
   <li class="bailandi" style="border-bottom: 1px dotted #ccc; height:90px;box-sizing:border-box;padding:10px 0 0 0">
       <a href="" style="color:orange;">${o.B1}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.B2}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B3}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B4}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B5}</a>
       <a href="" style="color:orange;">${o.B6}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B7}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B8}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B9}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B10}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.B11}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:red;">${o.B12}</a>
   </li>
   <li class="jiage"  style="border-bottom: 1px dotted #ccc; height:95px;box-sizing:border-box;padding:10px 0 0 0">
       <a href="" style="margin:0 0 6px 0;">${o.C9}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C2}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C3}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C4}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.C5}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C6}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C7}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.C8}</a>
   </li>
   <li style=" width: 250px;
   height: 100px;
   padding:10px 0 0 0 ;">
       <a href="" style="color:orange;">${o.D1}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D2}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D3}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="" style="color:orange;">${o.D4}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D5}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.D6}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D7}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D8}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D9}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D10}</a>
       <span class="iconfont icon-fenge"></span><br>
       <a href="">${o.D11}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D12}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D13}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D14}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D15}</a>
       <a href="">${o.D16}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D17}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D18}</a>
       <span class="iconfont icon-fenge"></span>
       <a href="">${o.D19}</a>
   </li>
 </ul>
 <ul class="right" style=" width: 160px;
   height: 450px;">
   <img style="width:100%;height:100%;" src=${o.E1} alt="">
   </ul>
</div>
   `;
      });
      // 隐藏栏5
      let arr5 = [
        {
          a1: "啤酒",
          b1: "养生酒",
          c1: "黄酒",
          d1: "果酒",
          A1: "青岛啤酒",
          A2: "嘉士伯",
          A3: "科罗娜",
          A4: "喜力",
          A5: "百威",
          A6: "雪花",
          A7: "费尔德堡",
          A8: "凯撒",
          A9: "1664",
          A10: "更多",
          B1: "竹叶青",
          B2: "劲牌",
          B3: "宁夏红",
          B4: "更多",
          C1: "古越龙山",
          C2: "会稽山",
          C3: "椰岛鹿龟",
          C4: "唐宋",
          C5: "塔牌",
          C6: "更多",
          D1: "茅台悠蜜",
          D2: "通天",
          D3: "桓龙湖",
          D4: "兰逸伦",
          D5: "百梦园",
          E1: "../images/悠蜜.jpg",
        },
      ];
      let html5 = "";
      arr5.forEach((o) => {
        html5 = `
   <div class="box" style="width: 510px;height: 450px; background-color: #fff;display: flex;border:1px solid #eee;">
 <ul class="left" style="width: 80px;
   height: 450px;
   background-color: #eee;float:left">
   <p style="height:80px;line-height:80px">${o.a1}</p>
   <p>${o.b1}</p>
   <p style="height:70px;line-height:70px">${o.c1}</p>
   <p>${o.d1}</p>
 </ul>
 <ul class="middle" style="width: 270px;
   height: 400px;
   box-sizing: border-box;
   padding: 0 10px;float:left">
   <li class="qingdaopijiu" style="border-bottom: 1px dotted #ccc;
   box-sizing: border-box;
   padding: 10px 0 0 0;
   height: 80px;">
     <a href="" style="color:orange">${o.A1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A6}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A7}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A8}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A9}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.A10}</a>
   </li>
   <li style="width:250px;height:40px;
   border-bottom: 1px dotted #ccc;
   box-sizing: border-box;
   padding: 10px 0 0 0;">
     <a  href="" style="color:orange">${o.B1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.B2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.B3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.B4}</a>
     <span class="iconfont icon-xiangyougengduo"></span>
   </li>
   <li class="guyuelongshan" style="border-bottom: 1px dotted #ccc;
   box-sizing: border-box;
   padding: 10px 0 0 0;
   height: 70px;">
     <a href="" style="color:orange">${o.C1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.C3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C4}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C5}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.C6}</a>
     <span class="iconfont icon-xiangyougengduo"></span>
   </li>
   <li style="border:none;padding:10px 0 0 0">
     <a href="" style="color:orange">${o.D1}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="" style="color:orange">${o.D2}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.D3}</a>
     <span class="iconfont icon-fenge"></span>
     <a href="">${o.D4}</a>
     <span class="iconfont icon-fenge"></span><br>
     <a href="">${o.D5}</a>
   </li>
 </ul>
 <ul class="right" style=" width: 160px;
   height: 450px;float:left">
   <img style="width:100%;height:100%"  src=${o.E1} alt="">
   </ul>
</div>
   `;
      });
      // 隐藏栏6
      let arr6 = [
        {
          a1: "酒具",
          b1: "茶叶",
          c1: "水饮",
          d1: "食品",
          a: "酒杯",
          b: "开瓶器",
          c: "醒酒器",
          d: "海马酒刀",
          e: "香槟杯",
          f: "直身杯",
          g: "水晶高脚杯",
          h: "烈酒杯",
          i: "鸡尾酒杯",
          j: "酒架",
          k: "冰酒石",
          l: "小罐茶",
          m: "南国公主",
          n: "更多",
          o: "可口可乐",
          p: "零食",
        },
      ];
      let html6 = "";
      arr6.forEach((o) => {
        html6 = `
   <div class="box" style="width: 510px;
   height: 450px;
   background-color: #fff;
   display: flex;border:1px solid #eee">
 <ul class="left" style="width: 80px;
   height: 450px;
   background-color: #eee;">
   <p class="jiujv" style="height:70px;line-height:70px">${o.a1}</p><p>${o.b1}</p><p>${o.c1}</p><p>${o.d1}</p>
   </ul>
 <ul class="right" style=" width: 430px;
   height: 400px;
   box-sizing: border-box;
   padding: 0 10px;">
   <li class="jiubei" style=" width: 410px;
   height: 70px;
   box-sizing: border-box;
   padding: 12px 0 0 0;
   border-bottom: 1px dotted #666;">
 <a href="">${o.a}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.b}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.c}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.d}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.e}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.f}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.g}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.h}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.i}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.j}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.k}</a>
</li>
<li style="width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
 <a href="">${o.l}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.m}</a>
 <span class="iconfont icon-fenge"></span>
 <a href="">${o.n}</a>
 <span class="iconfont icon-xiangyougengduo"></span>
</li>
<li style="width: 410px;
   height: 40px;
   border-bottom: 1px dotted #666;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
 <a href="">${o.o}</a>
</li>
<li style="width: 410px;
   height: 40px;
   box-sizing: border-box;
   padding: 8px 0 0 0;">
 <a href="">${o.p}</a>
</li>
   </ul>
</div>
`;
      });
      let data = ["html1", "html2", "html3", "html4", "html5", "html6"];
      // 获取左边栏标签
      let oLeft = document.getElementById("left");
      let oBig = document.getElementById("big");
      oLeft.onmouseover = (e) => {
        oBig.style.display = "inline-block";
        if ([e.target.tagName] == "LI") {
          if (data[e.target.dataset["index"]] == "html1") {
            oBig.innerHTML = html1;
          }
          if (data[e.target.dataset["index"]] == "html2") {
            oBig.innerHTML = html2;
          }
          if (data[e.target.dataset["index"]] == "html3") {
            oBig.innerHTML = html3;
          }
          if (data[e.target.dataset["index"]] == "html4") {
            oBig.innerHTML = html4;
          }
          if (data[e.target.dataset["index"]] == "html5") {
            oBig.innerHTML = html5;
          }
          if (data[e.target.dataset["index"]] == "html6") {
            oBig.innerHTML = html6;
          }
        }
      };
      oLeft.onmouseleave = () => {
        oBig.style.display = "none";
      };
      /* 返回顶部 */
      let oA = document.getElementById("fanhuidingbu");
      window.onscroll = function () {
        var st = document.documentElement.scrollTop || document.body.scrollTop;
      };
      oA.onclick = function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      };
      // 鼠标移入移出的效果
      let oa10 = document.getElementById("a10");
      let oa11 = document.getElementById("a11");
      let oli10 = document.getElementById("li10");
      let oli11 = document.getElementById("li11");
      oa11.onmouseover = () => {
        oli10.style.overflow = "hidden";
        oli11.style.overflow = "visible";
        oa11.style.backgroundColor = "#fff";
        oa11.style.borderTop = "2px solid red";
        oa10.style.backgroundColor = "#eee";
        oa10.style.borderTop = "";
      };
      oa10.onmouseover = () => {
        oli10.style.overflow = "visible";
        oli11.style.overflow = "hidden";
        oa10.style.backgroundColor = "#fff";
        oa10.style.borderTop = "2px solid red";
        oa11.style.backgroundColor = "#eee";
        oa11.style.borderTop = "";
      };
      // 地址
      let baseUrl = "http://localhost:8888";
      // 验证其它登录小窗口
      /* let oqingdenglu4 = document.getElementById("qingdenglu4");
      console.log(oqingdenglu4.innerText);
      oqingdenglu4.onclick = () => {
        location.href = "05购物车页面.html";
      };
      let oqingdenglu5 = document.getElementById("a1");
      console.log(oqingdenglu5.innerText);
      oqingdenglu5.onclick = () => {
        location.href = "05.购物车页面.html";
      };
      // 登录1
      let oqingdenglu1 = document.getElementById("qingdenglu1");
      console.log(oqingdenglu1.innerText);
      oqingdenglu1.onmousedoen = () => {
        if (localStorage.getItem("nickname")) {
          location.reload;
        } else {
          location.href = "02.登录.html";
        }
      };
      // 登录2
      let oqingdenglu2 = document.getElementById("qingdenglu2");
      console.log(oqingdenglu2.innerText);
      oqingdenglu2.onmousedoen = () => {
        if (localStorage.getItem("nickname")) {
          location.reload;
        } else {
          location.href = "02.登录.html";
        }
      };
      // 登录3
      let oqingdenglu3 = document.getElementById("qingdenglu3");
      console.log(oqingdenglu3.innerText);
      oqingdenglu3.onmousedoen = () => {
        if (localStorage.getItem("nickname")) {
          location.reload;
        } else {
          location.href = "02.登录.html";
        }
      }; */
      /* // 弹出框
      if (localStorage.getItem("nickname")) {
        alert("欢迎" + localStorage.getItem("nickname"));
      } else {
        alert("登陆失败");
      } */
      let oshangpinliebiaoye = document.getElementById("shangpinliebiaoye");
      ajax({
        url: baseUrl + "/goods/list",
        type: "get",
        params: { current: 4, pagesize: 8 }, // 取20条数据

        fn(resData) {
          resData = JSON.parse(resData);
          console.log(resData);
          let html = "";
          resData.list.forEach((o) => {
            // href="05.商品详情plus.htmlP?pid=${o.goods_id}"} 获取商品id
            html += `
               <div class="shangpin">
            <a class="aa1" href="04.商品详情页.html?pid=${o.goods_id}"><img src="${o.img_big_logo}" alt="" /></a>
            <a class="aa2" href="">${o.title}</a>
            <p>￥ ${o.price}</p>
          </div>
                `;
          });
          oshangpinliebiaoye.innerHTML = html;
        },
      });
    </script>
  </body>
</html>
